<template>
  <!-- 组件市场头部 -->
  <div class="common-layout header-container">
    <el-container >
      <el-aside width="60px" class="header-back flex justify-content-center align-items-cente">
        <el-button  :icon="ArrowLeft" circle />
      </el-aside>
      <el-main class="header-center">
        <div class=" flex space-between">
            <div class="btn-box-left">
          <el-button type="danger">重置问卷</el-button>
          <el-button type="success">保存问卷</el-button>
        </div>
        <div class="btn-box-right">
          <el-button type="primary">预览</el-button>
        </div>
        </div>
      </el-main>
      <el-aside width="60px" class="header-avatar flex justify-content-center align-items-cente">
        <el-avatar  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      </el-aside>
    </el-container>
  </div>
  <!-- <div class="header-container">
        <div class="header-back">
        </div>
        <div class="header-center">

        </div>
        <div class="header-avatar">
            
        </div>
    </div> -->
</template>
<script lang="ts" setup>
import { ArrowLeft } from '@element-plus/icons-vue'
</script>
<style lang="scss" scoped>
.header-container {
        border-bottom: 1px solid var(--border-color);
        padding: 0;
  .header-back,
  .header-avatar {
    align-self: center;
  }
  .header-back{
    border-right: 1px solid var(--border-color);
  }
  .header-avatar{
    border-left: 1px solid var(--border-color);
  }
}
</style>
